<template>
  <div class="phone-login-container">
    <p class="phone-validate">手机号验证</p>
    <p class="subtitle">用于即使获取课程最新信息</p>
    <div class="content">
      <input class="phone" v-model="phone" placeholder="请输入您的手机号" type="number" />
      <div
        @click="getVcode"
        :style="{ color: isCownDown ? '#a8a8a8' : 'black' }"
        class="get_vcode"
      >{{ tipName }}</div>
      <input class="vcode" v-model="vcode" placeholder="请输入验证码" type="number" />
    </div>
    <div class="phone-login">
      <img @click="phoneLogin" src="/static/images/phone_login@2x.png" alt />
    </div>
  </div>
</template>

<script>
import request from "../utils/util";
export default {
  data() {
    return {
      phone: "17704051019",
      vcode: "",
      tipName: "获取验证码",
      count: 10,
      isCownDown: false,
      item: null,
    };
  },
  methods: {
    async getVcode() {
      //效验手机号
      const reg = /^1[3456789][0-9]{9}$/;
      if (!reg.test(this.phone)) {
        uni.showToast({
          title: "手机号不合法",
          icon: "none",
          duration: 2000,
        });
        return;
      }

      this.isCownDown = true;
      this.tipName = this.count;
      // 定时器倒计时
      if (this.item) return;
      this.item = setInterval(() => {
        if (this.count <= 1) {
          clearInterval(this.item);
          this.isCownDown = false;
          this.count = 10;
          this.tipName = "获取验证码";
          return;
        }

        this.count--;
        this.tipName = this.count;
      }, 1000);
      //发送短信
      const res = await request({
        url: "user/vcode",
        data: {
          phone: this.phone,
        },
      });
      console.log(res);
      if (res.data.status == 0) {
        uni.showToast({
          title: `${res.data.vcode}`,
          icon: "none",
          duration: 2000,
        });
      }
    },
    //发送登录请求
    async phoneLogin() {
      // const { phone, vcode } = this.data;
      const res = await request({
        url: "user/login",
        method: "post",
        data: {
          phone: this.phone,
          vcode: this.vcode,
        },
      });
      if (res.data.status == 0) {
        uni.setStorageSync("token", res.data.token);
        uni.showToast({
          title: res.data.message,
          icon: "none",
          duration: 2000,
          success: () => {
            uni.reLaunch({
              url: "/pages/home/index",
            });
          },
        });
      } else {
        uni.showToast({
          title: res.data.message,
          icon: "none",
          duration: 2000,
        });
      }
      console.log(res);
    },
    //跳转页面销毁未走完的定时器
    onUnload(){
      clearInterval( this.item)
    }
  },

  // data () {
  //   return {
  //     phone: '17704051019',
  //     vcode: '',
  //     tipName: '获取验证码',
  //     isCownDown: false, // 是否正在倒计时
  //     count: 10, // 倒计时的总秒数
  //     timerId: null // 记录创建的定时器
  //   }
  // },
  // onUnload () {
  //   clearInterval(this.data.timerId)
  // },
  // methods: {
  //   // 获取验证码
  //   async getVcode () {
  //     //1、进行正则匹配
  //     const reg = /^1[3456789][0-9]{9}$/
  //     if (!reg.test(this.phone)) {
  //       uni.showToast({
  //         title: '手机号不合法',
  //         duration: 1500,
  //         icon: 'none'
  //       })

  //       return
  //     }

  //     // 倒计时
  //     // 如果正在倒计时，则return
  //     if (this.isCownDown) return

  //     // 把倒计时设置为true
  //     this.isCownDown = true
  //     this.tipName = `${this.count}`

  //     // 整一个定时器，进行减少，但是要注意边界条件
  //     this.timerId = setInterval(() => {
  //       if (this.count <= 1) {
  //         // 清除定时器
  //         clearInterval(this.timerId)
  //         this.count = 10
  //         this.tipName = '获取验证码'
  //         this.isCownDown = false

  //         return
  //       }

  //       // 正常的--
  //       this.count--
  //       this.tipName = `${this.count}`
  //     }, 1000)

  //     // 3、发请求，获取验证码
  //     const res = await request({
  //       url: 'user/vcode',
  //       data: {
  //         phone: this.phone
  //       }
  //     })

  //     uni.showToast({
  //       title: `${res.data.vcode}`,
  //       duration: 1500,
  //       icon: 'none'
  //     })
  //   },
  //   // 手机号登录
  //   async phoneLogin () {
  //     const res = await request({
  //       url: 'user/login',
  //       method: 'POST',
  //       data: {
  //         phone: this.phone,
  //         vcode: this.vcode
  //       }
  //     })

  //     if (res.data.status === 0) {
  //       // 保存token到本地
  //       uni.setStorageSync('token', res.data.token)

  //       // 提示，并且完成之后，跳转到首页
  //       uni.showToast({
  //         title: res.data.message,
  //         duration: 1000,
  //         icon: 'none',
  //         success: () => {
  //           uni.reLaunch({
  //             url: '/pages/home/index'
  //           })
  //         }
  //       })
  //     } else {
  //       uni.showToast({
  //         title: res.data.message,
  //         duration: 1000,
  //         icon: 'none'
  //       })
  //     }
  //   }
  // }
};
</script>

<style lang="less" scoped>
.phone-login-container {
  padding: 0rpx 68rpx;
  .phone-validate {
    margin-top: 100rpx;
    color: #393939;
    font-size: 43px;
  }
  .subtitle {
    margin-top: 20rpx;
    color: #a8a8a8;
    font-size: 30rpx;
  }
  .content {
    margin-top: 150rpx;
    height: 250rpx;
    position: relative;
    .phone {
      height: 100rpx;
      font-size: 15px;
      // background-color: green;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        background-color: #e9e9e9;
        left: 0;
        right: 0;
        height: 1px;
        bottom: 1px;
      }
    }
    .get_vcode {
      position: absolute;
      right: 0;
      top: 20rpx;
      width: 164rpx;
      height: 56rpx;
      text-align: center;
      line-height: 56rpx;
      font-size: 24rpx;
      color: #a8a8a8;
      border: 1px solid rgba(168, 168, 168, 1);
      border-radius: 20px;
      z-index: 2;
    }
    .vcode {
      margin-top: 30px;
      height: 100rpx;
      font-size: 15px;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        background-color: #e9e9e9;
        left: 0;
        right: 0;
        height: 1px;
        bottom: 1px;
      }
    }
  }
  .phone-login {
    margin-top: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 568rpx;
      height: 98rpx;
    }
  }
}
</style>
